<template>
	<view class="fpmw-page">
		<view class="fpmw-card">
			<view class="fpmw-card-header">
				<view class="card-header-icon"></view>
				<view class="fpmw-card-header-title">帮助中心</view>
			</view>
			<view class="fpmw-card-body">
				<view class="fpmw-collapse">
					<view class="fpmw-collapse-item" v-for="(item,index) in positionlist" :key="index">
						<view class="fpmw-collapse-header" @click="onelist(index)">
							<view class="fpmw-collapse-header-left">
								<view class="fpmw-collapse-title">{{item.name}}</view>
								<view class="fpmw-collapse-desc"></view>
							</view>
							<view class="fpmw-collapse-header-right">
								<image src="@/static/img/rightjt.png" class="more-icon"
									:class="item.oneliststare?'icon-top':''">
								</image>
							</view>
						</view>
						<view class="fpmw-collapse-body">
							<view class="fpmw-collapse">
								<navigator :url="'/pages/problemDetail/problemDetail?id='+item2.id"
									v-for="(item2,index2) in item.article" :key="index2"
									:class="item.oneliststare?'twoshow':'twohide'">
									<view class="fpmw-collapse-header">
										<view class="fpmw-collapse-header-left">
											<view class="collapse-item-title">{{index2+1}}.{{item2.title}}
											</view>
										</view>
										<view class="fpmw-collapse-header-right">
											<image src="@/static/img/rightjt.png" class="more-icon ">
											</image>
										</view>
									</view>
								</navigator>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="fpmw-card-header">
				<view class="card-header-icon"></view>
				<view class="fpmw-card-header-title">区域客服咨询选择</view>
			</view>
			<view class="diqu">
				<view v-for="(item2,index2) in kefu_list" :key="index2">
					<view class="title">{{item2.name}}</view>
					<view class="flex-y-center">
						<button class="button"  @click="kefuTel2(item2.mobile)"  >电话客服</button>
					</view>
				</view>
				<!-- <view>
					<view class="title">惠吃外卖PLUS-宁波市</view>
					<view class="flex-y-center">
						<button class="button"  @click="kefuTel2" >电话客服</button>
						<button class="button" @click="kefuImg2">在线客服</button>
					</view>
				</view> -->
			</view>
		</view>
		<view class="fpmw-btn-area">
			<view @click="kefuImg" class="fpmw-btn-online" style="margin-bottom: 9px;">
				<button class="fpmw-btn-button">在线客服9:00-22:00</button>
			</view>
			<view class="fpmw-btn-online" @click="kefuTel()">
				<view data-v-e6f3ba32="">电话客服9:00-22:00</view>
			</view>
		</view>
    <view style="height: 260rpx;width: 100%"></view>

		<!-- 生成的图片 -->
		<view v-if="posterUrl" class="section-result flex-x-center flex-y-center" @click="posterhide">
			<!-- H5采用长按保存图片，app就可以通过按钮保存或分享，微信小程序需要连接到H5再进行长按保存 -->
			<!-- 图片使用 img 标签会好些，可以更好的兼容base64位图片连接的显示 -->
			<img class="image" :src="posterUrl" alt="" />

		</view>

	</view>



</template>

<script>
	import {
		help
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				positionlist: [],
				kefu_img: '',
				kefu_tel: '',
				posterUrl: '',
				kefu_list: [],
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			//获取数据
			loadData: function() {
				help({}).then((res) => {
					if (res.code == 1) {
						this.positionlist = res.data.article;
						this.kefu_img = res.data.kefu_img;
						this.kefu_tel = res.data.kefu_tel;
						this.kefu_list = res.data.kefu_list;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 0
							});
						}, 1000)
					}
				}).catch(err => {
					console.log(err)
				})

			},
			onelist(index) {
				let positionlist = this.positionlist;
				// 展开收起一级列表 start
				if (positionlist[index]['oneliststare'] == false) {
					positionlist[index]['oneliststare'] = true;
				} else {
					positionlist[index]['oneliststare'] = false;
				}
				// 展开收起一级列表 end
			},
			posterhide() {
				this.posterUrl = '';
			},
			//弹窗在线客服二维码
			kefuImg() {
				if (!this.kefu_img) {
					uni.showToast({
						title: '暂无在线客服',
						icon: "error"
					});
					return;
				}
				uni.previewImage({
					urls:[this.kefu_img]
				})
				// this.posterUrl = this.kefu_img;
			},
			//拨打客服电话
			kefuTel() {
				if (this.kefu_tel) {
					uni.makePhoneCall({
						phoneNumber: this.kefu_tel,
						// 成功回调
						success: (res) => {
							console.log('调用成功!')
						},
						// 失败回调
						fail: (res) => {
							console.log('调用失败!')
						}
					})
				} else {
					uni.showToast({
						title: '暂无电话客服',
						icon: "error"
					});
				}
			},
			//拨打客服电话
			kefuTel2(tel) {
				if (tel) {
					uni.makePhoneCall({
						phoneNumber:tel,
						// 成功回调
						success: (res) => {
							console.log('调用成功!')
						},
						// 失败回调
						fail: (res) => {
							console.log('调用失败!')
						}
					})
				} else {
					uni.showToast({
						title: '暂无电话客服',
						icon: "error"
					});
				}
			},
			//弹窗在线客服二维码
			kefuImg2(e) {
				var img
				if (!img) {
					uni.showToast({
						title: '暂无在线客服',
						icon: "error"
					});
					return;
				}
				this.posterUrl = img
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f8f9;
	}

	.fpmw-page {
    padding: 30rpx 0;
    box-sizing: border-box;
	}

	.fpmw-card-header-title {
		margin-left: 9px;
		font-size: 32rpx;
		font-weight: 600
	}

	.fpmw-collapse-title {
		font-size: 30rpx;
	}

	.fpmw-collapse-desc {
		font-size: 24rpx;
		color: #999;
		padding: 0 9px
	}

	.collapse-item-title {
		font-size: 28rpx;
		;
		padding: 0 9px
	}

	.no-data {
		color: #ebebeb
	}

	.fpmw-card {
		width: 95%;
    margin: 0 auto;
		display: flex;
		background-color: #fff;
		flex-flow: column;
		justify-content: center;
		border-radius: 9px;
	}

	.fpmw-card .fpmw-card-header {
		margin-left: 9px;
		padding: 15px;
		border-bottom: 1px #f6f5f5 solid;
		display: flex;
		align-items: center;

	}

	.fpmw-card .card-header-icon {
		width: 3px;
		height: 14px;
		background-color: #ff8546
	}

	.fpmw-collapse .fpmw-collapse-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 9px;
		padding: 15px;
		border-bottom: 1px #f6f5f5 solid
	}

	.fpmw-collapse .fpmw-collapse-header .fpmw-collapse-header-left {
		display: flex;
		align-items: flex-end
	}

	.more-icon {
		width: 14px;
		height: 14px
	}

	.icon-top {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg)
	}

	.icon-bottom {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg)
	}

	.fpmw-page .fpmw-btn-area {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
    padding: 30rpx;
    box-sizing: border-box;
	}

	.fpmw-page .fpmw-btn-area .fpmw-btn-online {
		width: 326px;
		border-radius: 24px;
		background: linear-gradient(90deg, #ff8546, #ffb130);
    height: 46px;
    line-height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
	}

	.fpmw-page .fpmw-btn-area .fpmw-btn-phone {
		width: 326px;
		height: 33px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 30rpx;
	}

	.fpmw-btn-button {
		background: linear-gradient(90deg, #ff8546, #ffb130);
		color: #fff;
		font-size: 30rpx;
		width: 326px;
    height: 46px;
    line-height: 46px;
		border-radius: 24px
	}

	.fpmw-btn-button::after {
		border: none
	}

	.oneshow {
		display: block;
	}

	.onehide {
		display: none;
	}

	.twoshow {
		display: block;

	}

	.twohide {
		display: none;
	}

	.section-result {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
		padding: 30rpx 0;
		z-index: 999;
	}

	.section-result img {
		width: 640rpx;
		height: 1138rpx;
	}
	.diqu{
		padding: 15px;
    margin-left: 9px;
	}
	.diqu .title {
	}

	.diqu .button {
		background: linear-gradient(90deg, #ff8546, #ffb130);
		color: #fff;
		font-size: 14px;
		width: 100px;
		border-radius: 6px;
		margin-right: 15px;
	}
</style>
